<template>
	<div class="indexHome">
		<top></top>
		<div class="main">
			<banner></banner>
			<page-title><span class="c-gold">{{LangSet(['遊戲中心','Game center'])}}</span></page-title>
			<!--页面提示头-->
			<div class="page-tips mt20" v-cloak>
				<p class="copytext">給你分享一款DAPP遊戲，在支持TRON的錢包里面打開這個地址就可以啦：
					{{shareUrl}}<template v-if="tornlinkToken">?code={{tornlinkToken.code}}</template><!--由于vue的变量响应式设计原因，下面需要这样判断，才能从vue的Object中取值-->
				</p>
				<el-button type="danger" size="small" class="JS-copy mt10 pointer">{{LangSet(['複製分享內容','Click to copy'])}}</el-button>
			</div>




			<!--分享本页面-->
			<div class="share-btn">
				<a class="bt ml20" @click="openShare()">
					<i class="fa fa-share c-fff f22"></i>{{LangSet(['分享遊戲，獲得'+xg.name,'Share to earn '+xg.name])}}
				</a>
				<el-popover placement="top-end" title="" width="200" trigger="hover" content="推廣挖礦：介紹玩家每獲得1個代幣，推廣人員獲得0.2個">
					<i class="f32 el-icon-question c-fff" slot="reference"></i>
				</el-popover>
			</div>

			<!--主要内容-->
			<div class="games">



			</div>

			<div class="mt40"></div>

			<!--main 结束 -->
			<footter color="color" showLink></footter>

			<!--免责声明-->
			<div class="disclaimer">{{disclaimer}}</div>

			<float-tip strEnd="gamesIndex" showClose>
				<div style="padding:10px 20px 0px;">
					<p class="f14" style="color:#ff1014">我们不对这些国家或地区提供服务:{{serviceArea}}</p>
					<p class="f14" style="color:#3300ef">{{disclaimer}}</p>
				</div>
			</float-tip>

		</div>
		<!--main结束-->

	</div>
</template>

<script type="text/javascript">

	/*加载资源*/
	import QRCode from 'qrcodejs2'
	import { mixins } from '@/mixins/mixins' //公共混入
	import { mixinsUtils } from '@/mixins/mixins.utils' //公共混入
	import { disclaimer, serviceArea } from '@/libs/lang'

	/*组件*/
	import top from '@/components/top.vue'
	import footter from "@/components/footer.vue"
	import banner from '@/components/banner.vue'
	import pageTip from '@/components/pageTip.vue'
	import pageTitle from '@/components/pageTitle.vue'
	import floatTip from '@/components/floatTip.vue'

	export default {
		name:"gameIndex",
		components: { top,footter,banner,pageTip,pageTitle,floatTip },
		mixins:[mixins,mixinsUtils],
		data () {
			return {
				//分享窗口显示
				flagShare: false,
				//免责声明
				disclaimer:disclaimer,
				//服务地区
				serviceArea:serviceArea,
			};
		},
		computed: {
			//分享地址
			shareUrl () {
				let _url = window.location.href.replace(/\?code=.*/gi,'');
				//由于tornlinkToken不是vue初始的变量，不是响应式的，不能在计算属性中使用，会报错
				// _url = _url + "?code=" + this.tornlinkToken.code;
				return _url
			}

		},
		created () {
		},
		mounted () {

		},
		methods:{

		}
	};
</script>

<style lang="less" scoped>
	/*公共变量*/
	@import '~@/assets/global.less';


	/*资产数据*/
	.games {
		background-color: #fff;max-width: 1100px;margin: 30px auto 0px;padding: 80px 0px;border-radius: 20px;
		display: flex;align-items: flex-start;justify-content: center;flex-wrap: wrap;
	}

	.game-picture {
		height: 233px;background-color: #353e4d;font-size: 32px;font-weight: bold;width: 300px;
		transition: all 0.5s;border: 4px solid #fff;border-radius: 20px;overflow: hidden;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
		display: flex;align-items: center;justify-content: center;flex-direction: column;
	}
	.game-picture img {width: 300px;height: 233px;}
	.game-title {color: #353e4d;font-size: 24px;font-weight: bold;text-align: center;padding: 20px 0px;transition: all 0.5s;}

	a.game-box {color: #353e4d;width: auto;margin: 0px 20px 40px;padding: 0px;border-radius: 10px;}
	a.game-box:hover {}
	a.game-box:hover .game-picture {box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.8)}
	a.game-box:hover .game-title {color: #f50}


	/*免责声明*/
	.disclaimer{padding:0px 0px 20px 0px}

	/**********************适应************************/
	@media screen and (max-width: @MINSCREEN) {
		.games {background-color: transparent;padding: 0px 0px;}
		.game-picture {border: 3px solid #fff;border-radius: 10px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);}
		.game-title {font-size: 18px;padding: 10px 0px;}
		a.game-box {margin: 0px 20px 10px;}
	}
</style>
